<template>
  <div class="tdesign-demo-block-column-large">
    <div style="margin-bottom: 10px">
      <t-button @click="visible1 = true">新增</t-button>
    </div>
    <t-table
      rowKey="index"
      ref="table"
      :data="tableData"
      :columns="columns"
      :stripe="stripe"
      :bordered="bordered"
      :hover="hover"
      :size="size"
      :table-layout="tableLayout ? 'auto' : 'fixed'"
      :pagination="pagination"
      resizable
    >
      <template #operation="data">
        <a class="link" @click="deleteData(data)">删除</a>
        <a class="link" @click="editData(data)">编辑</a>
      </template>
    </t-table>

    <t-dialog
      header="确认删除"
      body="确认删除吗?"
      :visible.sync="visible"
      :onConfirm="onConfirmAnother"
      :onCancel="onCancel"
      :onEscKeydown="onKeydownEsc"
      :onCloseBtnClick="onClickCloseBtn"
      :onOverlayClick="onClickOverlay"
      :onClose="close"
    ></t-dialog>

    <t-dialog
      header="新增数据"
      :visible.sync="visible1"
      :onConfirm="onConfirmAnother1"
      :onCancel="onCancel"
      :onEscKeydown="onKeydownEsc"
      :onCloseBtnClick="onClickCloseBtn"
      :onOverlayClick="onClickOverlay"
      :onClose="close"
    >
      <div slot="body">
        <t-form :data="formData" :labelWidth="60">
          <t-form-item name="platform">
            <template #label>平台</template>
            <t-select v-model="formData.platform" clearable>
              <t-option key="共有" label="共有" value="共有" />
              <t-option key="私有" label="私有" value="私有" />
            </t-select>
          </t-form-item>
          <t-form-item label="类型" name="type">
            <t-select v-model="formData.type" clearable>
              <t-option key="String" label="String" value="String" />
              <t-option key="Number" label="Number" value="Number" />
              <t-option key="Array" label="Array" value="Array" />
              <t-option key="Object" label="Object" value="Object" />
            </t-select>
          </t-form-item>
          <t-form-item name="needed">
            <template #label>是否必传</template>
            <t-select v-model="formData.needed" clearable>
              <t-option key="是" label="是" value="是" />
              <t-option key="否" label="否" value="否" />
            </t-select>
          </t-form-item>
        </t-form>
      </div>
    </t-dialog>

    <t-dialog
      header="修改数据"
      :visible.sync="visible2"
      :onConfirm="onConfirmAnother2"
      :onCancel="onCancel"
      :onEscKeydown="onKeydownEsc"
      :onCloseBtnClick="onClickCloseBtn"
      :onOverlayClick="onClickOverlay"
      :onClose="close"
    >
      <div slot="body">
        <t-form :data="formData1">
          <t-form-item name="idnex" label="序号">
            <t-input v-model="formData1.index" disabled />
          </t-form-item>
          <t-form-item name="platform" label="平台">
            <t-input placeholder="请输入内容" v-model="formData1.platform" />
          </t-form-item>
          <t-form-item label="类型" name="type">
            <t-input placeholder="请输入内容" v-model="formData1.type" />
          </t-form-item>
          <t-form-item name="needed">
            <template #label>是否必传</template>
            <t-input placeholder="请输入内容" v-model="formData1.needed" />
          </t-form-item>
        </t-form>
      </div>
    </t-dialog>
  </div>
</template>
<script lang="jsx">
export default {
  data() {
    return {
      editIndex: null,
      formData1: {},
      visible2: false,
      visible1: false,
      formData: {},
      deleteIndex: null,
      visible: false,
      orginData: [],
      tableData: [],
      size: "medium",
      tableLayout: false,
      stripe: true,
      bordered: true,
      hover: false,
      columns: [
        {
          width: 100,
          colKey: "index",
          title: "号码",
        },
        {
          width: 100,
          colKey: "platform",
          title: "平台",
          ellipsis: true,
        },
        {
          colKey: "type",
          title: "类型",
          ellipsis: true,
        },
        {
          colKey: "default",
          title: "默认值",
          ellipsis: true,
        },
        {
          colKey: "needed",
          title: "是否必传",
          ellipsis: true,
        },
        {
          colKey: "detail.position",
          title: "详情信息",
          width: 200,
          ellipsis: true,
        },
        {
          colKey: "options",
          title: "操作",
          width: 200,
          cell: "operation",
        },
      ],
      /** 非受控用法：与分页组件对齐 */
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        total: 10,
      },
    };
  },
  methods: {
    onConfirmAnother2() {
      this.visible2 = false;
      this.tableData.splice(this.formData1.index, 1, this.formData1);
    },
    onConfirmAnother1() {
      const arr = [];
      this.tableData.forEach((element) => {
        arr.push(element.index);
      });
      const index = arr[arr.length - 1] + 1;
      this.formData.index = index;
      this.formData.detail = {};
      this.formData.detail.position = `读取 ${this.tableData.length} 个数据的嵌套信息值`;
      if (this.formData.type == "Object") {
        this.formData.default = "{}";
      } else if (this.formData.type == "Number") {
        this.formData.default = "0";
      } else if (this.formData.type == "Array") {
        this.formData.default = "[]";
      } else if (this.formData.type == "String") {
        this.formData.default = "-";
      }
      this.formData.id = Math.round(Math.random() * 10000);
      this.tableData.push(this.formData);
      this.pagination.total = this.tableData.length;
      this.visible1 = false;
      this.formData = {};
    },
    deleteData(data) {
      this.visible = true;
      this.deleteIndex = data.row.id;
      // console.log(data);
    },
    editData(data) {
      this.visible2 = true;
      this.editIndex = data.row.index;
      this.formData1 = this.tableData[this.editIndex];
      // console.log(this.formData1);
    },
    onConfirmAnother() {
      this.tableData.filter((item, index) => {
        if (item.id === this.deleteIndex) {
          // console.log(index);
          this.tableData.splice(index, 1);
        }
      });
      // console.log(this.deleteIndex);
      // console.log(this.tableData);
      this.pagination.total = this.tableData.length;
      this.visible = false;
    },
    close(context) {
      console.log("关闭弹窗，点击关闭按钮、按下ESC、点击蒙层等触发", context);
    },
    onCancel(context) {
      console.log("点击了取消按钮", context);
    },
    onKeydownEsc(context) {
      console.log("按下了ESC", context);
    },
    onClickCloseBtn(context) {
      console.log("点击了关闭按钮", context);
    },
    onClickOverlay(context) {
      console.log("点击了蒙层", context);
    },
  },
  mounted() {
    this.pagination.total = 6;
    this.orginData = [];
    for (let i = 0; i < this.pagination.total; i++) {
      this.orginData.push({
        index: i,
        id: Math.round(Math.random() * 10000),
        platform: i % 2 === 0 ? "共有" : "私有",
        type: ["String", "Number", "Array", "Object"][i % 4],
        default: ["-", "0", "[]", "{}"][i % 4],
        detail: {
          position: `读取 ${i} 个数据的嵌套信息值`,
        },
        needed: i % 4 === 0 ? "是" : "否",
        description: "数据源",
      });
    }
    this.tableData = this.orginData;
    // console.log(this.tableData);
  },
};
</script>

<style scoped>
.link {
  margin-right: 10px;
}
</style>
